<template>
  <div class="excel">
    <el-upload
      class="upload-demo"
      action=""
      :on-change="handleChange"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :file-list="fileListUpload"
      :limit="limitUpload"
      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
      :auto-upload="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div>
    </el-upload>

    <el-table :data="tableData" style="width: 60%" border>
      <el-table-column
        v-for="(item, index) in excelToJson"
        :key="index"
        :prop="item.type"
        :label="item.type"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-button @click="exportExcel">导出</el-button>

  <el-dialog
    title="修改"
    v-model="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <div class="item" v-for="(item, index) in excelToJson" :key="index">
      <span>{{ excelToJson[index].name }}</span>
      <span>
        {{ updataInfo[excelToJson[index].type] }}
      </span>
      <!-- 这个地方循环渲染不合适，只能单个渲染 -->
      <!-- <el-input v-model="updataInfo[excelToJson[index].type]" /> -->
    </div>
  </el-dialog>
</template>



<script>
import { importfxx, getExcel } from "@/tool";
import { excelToJson } from "@/tool/config.js";
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      tableData: [],
      dialogVisible: false,
      obj:'',
      updataInfo: {}
    });
    // 修改
    function handleClick(data) {
      // console.log(data);
      state.updataInfo = data;
      state.dialogVisible = true;
    }

    // 导入
    async function handleChange(file, fileList) {
      this.fileTemp = file.raw;
      //   console.log(file.raw)
      let data = await importfxx(file.raw);
      // console.log(data);
      state.tableData = data;
    }

    function handleRemove(file, fileList) {
      this.fileTemp = null;
    }

    // 导出
    function exportExcel() {
      getExcel(state.tableData);
    }

    return {
      ...toRefs(state),
      excelToJson,
      handleChange,
      handleRemove,
      exportExcel,
      handleClick,
    };
  },
};
</script>

<style lang="less">
.item {
  display: flex;
  span {
    display: block;
    min-width: 80px;
  }
}
</style>